<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en" class="no-js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>备份</title>
		<meta name="description" content="">
		<meta name="keywords" content="title, header, effect, scroll, inspiration, medium, web design">
		<meta name="author" content="Codrops">
		<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/come/blog_files/normalize.css">
		<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/come/blog_files/demo.css">
		<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/come/blog_files/component.css">
		
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<!-- 板块分类 -->
			<script type="text/javascript" src="<%=path%>/page/front/come/js/vendor/jquery.1.7.2.min.js"></script>
			<script type="text/javascript" src="<%=path%>/page/front/come/js/tytabs.jquery.min.js"></script>
			<script type="text/javascript">
			    <!--
			    $(document).ready(function(){
			    	$("#tabsholder2").tytabs({
			    							prefixtabs:"tabz",
			    							prefixcontent:"contentz",
			    							classcontent:"tabscontent",
			    							tabinit:"2",
			    							catchget:"tab2",
			    							fadespeed:"normal"
			    							});
			    });
			-->
			</script>
			<link href="<%=path%>/page/front/come/css/styles-bankuai.css" rel="stylesheet" type="text/css" />
		<!-- 板块分类end -->	
	<script src="./blog_files/ad.js" async=""></script>
	<style type="text/css">
		.sousuo-wenzhang{
            height:100px;
            width: 95%;
            background: red;
            margin: 50px auto;
            border-left: 2px solid #1F47AD;
        }
      	.sousuo-wenzhang-shipin{
      		height:900px;
            width: 105%;
            margin:10% -3%;
            border-left: 0px solid #1F47AD;
      	}
        .wenzhang-xinxi{
            height:100%;
            width: 60%;
            /*background: green;*/
            float: left;
        }
        .wenzhang-biaoti
        {
            height:60%;
            width: 100%;
            background: #fff;
            font-size: 30px;
            margin-left: 10px;
        }
        .wenzhang-author{
            height:100%;
            width: auto;
            /*background: red;*/
            float: left;
            color: #777;
            font-size:16px;
        }
        .wenzhang-time{
            height:100%;
            width:45%;
            /*background: red;*/
            margin-left: 2px;
            float: left;
            color: #777;
            font-size:16px;
        }
        .wenzhang-zhongjian{
            height:100%;
            width: 20%;
            /*background:blue;*/
            float: left;
            margin-left: 2px;
            color: #777;
            font-size:16px;
            text-align: center;
        }

        .wenzhang-formation{
            height:30%;
            width: 100%;
            margin-top: 5px;
            margin-left: 10px;
            /*background: #ddd;*/

        }
	</style>
	
	<!-- 视频 -->
		<style type="text/css">
			.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
			.clearfix{display:inline-table;}/* Hides from IE-mac \*/
			*html .clearfix{height:1%;}
			.clearfix{display:block;}/* End hide from IE-mac */
			*+html .clearfix{min-height:1%;}
			/* section */
			.section{width:100%;overflow:hidden;}
			.section ul{width:100%;}
			.section ul li{float:left;margin-right:6px;margin-bottom:10px;display:inline;width:200px;height:200px;overflow:hidden;position:relative;}
			.section ul li .photo{width:200px;height:200px;overflow:hidden;}
			.section .rsp{width:200px;height:200px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;}
			.section .text{position:absolute;width:200px;height:200px;left:-200px;top:0px;overflow:hidden;}
			.section .text h3{width:200px;margin-top:50px;height:50px;line-height:50px;text-align:center;color:#FFFFFF;font-size:20px;}
			.section .text a{text-decoration:none}
			.section .text div{text-align:center;color:#FFFFFF;font-size:18px;}
			</style>
	<!-- 视频end -->
	
	<!-- 划出框 -->
		<style>
			

			img{border:none;}
			a{text-decoration:none;}
			
			.PopupLayer{width:600px;height:400px;padding:10px;position:fixed;left:50%;margin-left:-300px;background:#fff;background-clip:padding-box;border-radius:10px;border:10px solid #666;border:15px solid rgba(0,0,0,0.2);position:;z-index: 1000;}
			.PopupLayer a.close{display:block;width:30px;height:30px;float:right;background:url(<%=path%>images/close.jpg) no-repeat;overflow:hidden;}
			.PopupLayer a.close:hover{background-position:-30px;}
			.PopupLayer p{font:13px "宋体";line-height:30px;letter-spacing:0.1em;margin-top:35px;}
			.PopupLayer p span{color:#7d7d7d;}
			.PopupLayer ul{list-style:none;width:475px;height:103px;margin:30px auto 0;border:1px dashed #e4e4e4;overflow:hidden;}
			.PopupLayer ul li{float:left;width:95px;height:103px;overflow:hidden;}
			.PopupLayer ul li a{display:block;}
			.PopupLayer a.btn{display:block;width:100px;height:38px;line-height:38px;text-align:center;color:#fff;font-weight:bold;letter-spacing:0.1em;float:right;background:url(images/btn_bg.jpg) repeat-x;border-radius:8px;margin:40px 30px 0 0;}
			
			.btn_content{ margin:50px auto;top:327px;width:204px;height:25px;}
			.btn_content button{width:100px;height:25px;line-height:25px;background:#F60;border:1px solid #989898;margin-right:2px;}
			.btn_content button:hover{color:#fff;}
		</style>
	<!-- 划出框end -->
	
	</head>
	<body class="demo-2">
		<div id="container" class="container intro-effect-fadeout">
			<!-- Top Navigation -->
			<header class="header">
				<div class="bg-img"><img src="<%=path%>/page/front/come/blog_files/3.jpg" alt="Background Image"></div>
				<div class="title">
					
					<h1 style="margin: 0 auto;font-size:60px;">投资是聪明的，投资知识是明智的</h1>
					<p class="subline" style="font-size:22px;">教育</p>
					<p style="font-size:14px;">by <strong>Mark Satorini</strong> — Posted in <strong>Animals</strong> on <strong>May 21, 2014</strong></p>
				</div>
			</header>
			
			<article class="content">
				<div class="center" style="-3%">
				    <!-- Tabs2 -->
				    <div id="tabsholder2">
				        <ul class="tabs">
				            <li id="tabz1">视频</li>
				            <li id="tabz2">文章  blog</li>
				            <li id="tabz3">文档</li>
				        </ul>
				        <div class="contents marginbot">
				            <div id="contentz1" class="tabscontent">
				                <article class="content">
									<div class="sousuo-wenzhang-shipin">
				                    	<div class="section">
											<ul class="clearfix">
												<c:forEach items="${all.list}" var="list">
														
														<li>
															<div class="photo"><img src="<%=path%>touxiang.jpg" width=" 100%" height="100%" class="thumbnailphoto"/></div>
															<a  onclick="openit('${list.inLocalhost}')" class="open" style="cursor:pointer;"><div class="rsp"></div></a>
															<div class="text"><h3>${list.inTitle }</h3></div>
															<input type="hidden" class="thumbnail" value="${list.inLocalhost}" >
														</li>
														</c:forEach>
											</ul>
											<div class="clear"></div>
												<ul class="nav">
								                	<li><a href="morevedio.html" onclick="scroll()">首页</a></li>
								                	<c:if test="${all.pageNum>1}">
								                		<li><a href="morevedio.html?p=${all.pageNum-1}">上一页</a></li>
								                	</c:if>
								                	<c:if test="${all.pageNum<all.pageCount}">
								                		<li><a href="morevedio.html?p=${all.pageNum+1}">下一页</a></li>
								                	</c:if>
								                	<li><a href="morevedio.html?p=${all.pageCount}">尾页</a></li>
								                </ul>
										</div>
				                   <input type="hidden" id="vedioId"> 
				
								</div>
							</article>
							</div>

				            <div id="contentz2" class="tabscontent">
				                    <div class="sousuo-wenzhang">
				                       
				                        <div class="wenzhang-xinxi">
				                            
				                            <div class="wenzhang-biaoti"><a href="">这是文章标题</a></div>
				                            <div class="wenzhang-formation">
				                                <div class="wenzhang-author">章天锋</div>
				                                <div class="wenzhang-zhongjian">发表于</div>
				                                <div class="wenzhang-time">2014-7-17</div>
				                            </div>
				                        </div>

				                         <img height="80" alt="" width="80" src="<%=path%>/page/front/come/touxiang.jpg" style="-webkit-border-radius:80px; -moz-border-radius:80px;border-radius:80px;float:right;"/>
				                    </div>
				                    <div class="sousuo-wenzhang">
				                       
				                        <div class="wenzhang-xinxi">
				                            
				                            <div class="wenzhang-biaoti">这是文章标题</div>
				                            <div class="wenzhang-formation">
				                                <div class="wenzhang-author">章天锋</div>
				                                <div class="wenzhang-zhongjian">发表于</div>
				                                <div class="wenzhang-time">2014-7-17</div>
				                            </div>
				                        </div>

				                         <img height="80" alt="" width="80" src="<%=path%>/page/front/come/touxiang.jpg" style="-webkit-border-radius:80px; -moz-border-radius:80px;border-radius:80px;float:right;"/>
				                    </div>
				                    <div class="sousuo-wenzhang">
				                       
				                        <div class="wenzhang-xinxi">
				                            
				                            <div class="wenzhang-biaoti">这是文章标题</div>
				                            <div class="wenzhang-formation">
				                                <div class="wenzhang-author">章天锋</div>
				                                <div class="wenzhang-zhongjian">发表于</div>
				                                <div class="wenzhang-time">2014-7-17</div>
				                            </div>
				                        </div>

				                         <img height="80" alt="" width="80" src="<%=path%>/page/front/come/touxiang.jpg" style="-webkit-border-radius:80px; -moz-border-radius:80px;border-radius:80px;float:right;"/>
				                    </div>
				                    <div class="sousuo-wenzhang">
				                       
				                        <div class="wenzhang-xinxi">
				                            
				                            <div class="wenzhang-biaoti">这是文章标题</div>
				                            <div class="wenzhang-formation">
				                                <div class="wenzhang-author">章天锋</div>
				                                <div class="wenzhang-zhongjian">发表于</div>
				                                <div class="wenzhang-time">2014-7-17</div>
				                            </div>
				                        </div>

				                         <img height="80" alt="" width="80" src="<%=path%>/page/front/come/touxiang.jpg" style="-webkit-border-radius:80px; -moz-border-radius:80px;border-radius:80px;float:right;"/>
				                    </div>
				                    <div class="sousuo-wenzhang">
				                       
				                        <div class="wenzhang-xinxi">
				                            
				                            <div class="wenzhang-biaoti">这是文章标题</div>
				                            <div class="wenzhang-formation">
				                                <div class="wenzhang-author">章天锋</div>
				                                <div class="wenzhang-zhongjian">发表于</div>
				                                <div class="wenzhang-time">2014-7-17</div>
				                            </div>
				                        </div>

				                         <img height="80" alt="" width="80" src="<%=path%>/page/front/come/touxiang.jpg" style="-webkit-border-radius:80px; -moz-border-radius:80px;border-radius:80px;float:right;"/>
				                    </div>
				                    <div class="sousuo-wenzhang">
				                       
				                        <div class="wenzhang-xinxi">
				                            
				                            <div class="wenzhang-biaoti">这是文章标题</div>
				                            <div class="wenzhang-formation">
				                                <div class="wenzhang-author">章天锋</div>
				                                <div class="wenzhang-zhongjian">发表于</div>
				                                <div class="wenzhang-time">2014-7-17</div>
				                            </div>
				                        </div>

				                         <img height="80" alt="" width="80" src="<%=path%>/page/front/come/touxiang.jpg" style="-webkit-border-radius:80px; -moz-border-radius:80px;border-radius:80px;float:right;"/>
				                    </div>
				                    <div class="sousuo-wenzhang">
				                       
				                        <div class="wenzhang-xinxi">
				                            
				                            <div class="wenzhang-biaoti">这是文章标题</div>
				                            <div class="wenzhang-formation">
				                                <div class="wenzhang-author">章天锋</div>
				                                <div class="wenzhang-zhongjian">发表于</div>
				                                <div class="wenzhang-time">2014-7-17</div>
				                            </div>
				                        </div>

				                         <img height="80" alt="" width="80" src="<%=path%>/page/front/come/touxiang.jpg" style="-webkit-border-radius:80px; -moz-border-radius:80px;border-radius:80px;float:right;"/>
				                    </div>                
				            </div>
				            <div id="contentz3" class="tabscontent">
				                    <div class="sousuo-yonghu">
				                       
				                        <div class="yonghu-xinxi">
				                            <div class="yonghu-formation">
				                                <div class="yonghu-name">
				                                    章天锋
				                                </div>
				                                <div class="yonghu-age">age:20</div>
				                                <div class="yonghu-email">
				                                    ztf1577833978@163.com
				                                </div>
				                            </div>
				                        </div>

				                         <img height="80" alt="" width="80" src="<%=path%>/page/front/come/touxiang.jpg" style="-webkit-border-radius:80px; -moz-border-radius:80px;border-radius:80px;float:right;"/>
				                    </div>                     
				            </div>
				            <div id="contentz4" class="tabscontent">
				            <div style="height:100px;width:100px;background:blue;"><a href="http://www.baidu.com">qwe</a></div>
				            </div>
				        </div>
				    </div>
				    <!-- /Tabs2 -->
				</div>
			</article>
			
		</div><!-- /container -->
		<script src="<%=path%>/page/front/come/blog_files/classie.js"></script>
		<script>
			(function() {

				// detect if IE : from http://stackoverflow.com/a/16657946		
				var ie = (function(){
					var undef,rv = -1; // Return value assumes failure.
					var ua = window.navigator.userAgent;
					var msie = ua.indexOf('MSIE ');
					var trident = ua.indexOf('Trident/');

					if (msie > 0) {
						// IE 10 or older => return version number
						rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
					} else if (trident > 0) {
						// IE 11 (or newer) => return version number
						var rvNum = ua.indexOf('rv:');
						rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
					}

					return ((rv > -1) ? rv : undef);
				}());


				// disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179					
				// left: 37, up: 38, right: 39, down: 40,
				// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
				var keys = [32, 37, 38, 39, 40], wheelIter = 0;

				function preventDefault(e) {
					e = e || window.event;
					if (e.preventDefault)
					e.preventDefault();
					e.returnValue = false;  
				}

				function keydown(e) {
					for (var i = keys.length; i--;) {
						if (e.keyCode === keys[i]) {
							preventDefault(e);
							return;
						}
					}
				}

				function touchmove(e) {
					preventDefault(e);
				}

				function wheel(e) {
					// for IE 
					//if( ie ) {
						//preventDefault(e);
					//}
				}

				function disable_scroll() {
					window.onmousewheel = document.onmousewheel = wheel;
					document.onkeydown = keydown;
					document.body.ontouchmove = touchmove;
				}

				function enable_scroll() {
					window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;  
				}

				var docElem = window.document.documentElement,
					scrollVal,
					isRevealed, 
					noscroll, 
					isAnimating,
					container = document.getElementById( 'container' ),
					trigger = container.querySelector( 'button.trigger' );

				function scrollY() {
					return window.pageYOffset || docElem.scrollTop;
				}
				
				function scrollPage() {
					scrollVal = scrollY();
					
					if( noscroll && !ie ) {
						if( scrollVal < 0 ) return false;
						// keep it that way
						window.scrollTo( 0, 0 );
					}

					if( classie.has( container, 'notrans' ) ) {
						classie.remove( container, 'notrans' );
						return false;
					}

					if( isAnimating ) {
						return false;
					}
					
					if( scrollVal <= 0 && isRevealed ) {
						toggle(0);
					}
					else if( scrollVal > 0 && !isRevealed ){
						toggle(1);
					}
				}

				function toggle( reveal ) {
					isAnimating = true;
					
					if( reveal ) {
						classie.add( container, 'modify' );
					}
					else {
						noscroll = true;
						disable_scroll();
						classie.remove( container, 'modify' );
					}

					// simulating the end of the transition:
					setTimeout( function() {
						isRevealed = !isRevealed;
						isAnimating = false;
						if( reveal ) {
							noscroll = false;
							enable_scroll();
						}
					}, 600 );
				}

				// refreshing the page...
				var pageScroll = scrollY();
				noscroll = pageScroll === 0;
				
				disable_scroll();
				
				if( pageScroll ) {
					isRevealed = true;
					classie.add( container, 'notrans' );
					classie.add( container, 'modify' );
				}
				
				window.addEventListener( 'scroll', scrollPage );
				
			})();
		</script>
		<!-- For the demo ad only --> 
		<script type="text/javascript" >


			function ResizeImages()
			{
			   var myimg,oldwidth,oldheight;
			   var maxwidth=550;
			   var maxheight=880
			     

			   for(i=0;i<imgs.length;i++){
			     myimg = imgs[i];

			     if(myimg.width > myimg.height)
			     {
			         if(myimg.width > maxwidth)
			         {
			            oldwidth = myimg.width;
			            myimg.height = myimg.height * (maxwidth/oldwidth);
			            myimg.width = maxwidth;
			         }
			     }else{
			         if(myimg.height > maxheight)
			         {
			            oldheight = myimg.height;
			            myimg.width = myimg.width * (maxheight/oldheight);
			            myimg.height = maxheight;
			         }
			     }
			   }
			}
			ResizeImages();
		</script>
		<!-- 视频 -->

			<script type="text/javascript" src="<%=path %>js/vendor/jquery.1.7.2.min.js"></script>
				<script type="text/javascript">
				$(document).ready(function(){	
					$(".section ul li .rsp").hide();	
					$(this).find(".rsp").stop().fadeTo(500,0.5)
					$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
					$(".section	 ul li").hover(function(){
						$(this).find(".rsp").stop().fadeTo(500,0)
						$(this).find(".text").stop().animate({left:'300'}, {duration: "fast"})
						$(this).find(".text").animate({left:'-300'}, {duration: 0})
						
					},
					function(){
						$(this).find(".rsp").stop().fadeTo(500,0.5)
						$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
					});
				});
				</script>
		<!-- 视频end -->

		<!-- 划出框 -->

			<script type="text/javascript" src="<%=path %>/js/vendor/jquery.1.7.2.min.js"></script>
			<script>
				$(function(){
					if($.browser.msie && $.browser.version<=6)
					{
						$(".PopupLayer").css("position","absolute");
					}
					$(".PopupLayer").css({"top":$(".PopupLayer").outerHeight()*-1+"px","opacity":0});
					function notice_show()
					{
						var browser_visible_region_height=document.documentElement.clientHeight;
						var element_height=$(".PopupLayer").outerHeight();
						
						var element_show_top=(browser_visible_region_height-element_height)/2;
						$(".PopupLayer").stop(true).animate({top:element_show_top,opacity:1},1800);
					}
					
					function notice_hidden()
					{
						var element_height=$(".PopupLayer").outerHeight();
						var ee=-element_height;
						$(".PopupLayer").stop(true).animate({top:ee,opacity:0},1000);
					}
					
					$("a.close").click(function(){
						var element_height=$(".PopupLayer").outerHeight();
						var ee=-element_height;
						$(".PopupLayer").animate({opacity:0},1000).animate({top:ee},0);
					})
					
					$("a.btn").click(function(){
						$(".PopupLayer").animate({top:$(document).height(),opacity:0},1000)
					})
					
					$(".open").click(function(){
						var nowvId=$("#nowvId").val();
						$.post("../youku/vediobroswer.html?vedioId="+nowvId);
						$("#vedioPage").attr("src","vedio.html?vedioId="+nowvId);
						notice_show();
					})
					
					$("#close").click(function(){
						notice_hidden();
					})
					
					function check()
					{
						var kk=$(".PopupLayer").outerHeight()*-1;
						var ww=$(document).height();
						var qq=parseInt($(".PopupLayer").css("top"));
						
						if(qq == kk || qq == ww)
						{
							return;
						}
						else
						{
							var browser_visible_region_height=document.documentElement.clientHeight;
							var element_height=$(".PopupLayer").outerHeight();
							var element_show_top=(browser_visible_region_height-element_height)/2;
							$(".PopupLayer").stop(true).animate({top:element_show_top},1500);
						}
					}
					
					$(window).resize(function(){
						check();
					})
					
				})
			</script>
		<!-- 划出框end -->
		<!-- For the demo ad only -->   </body>
		<script type="text/javascript">
		$(document).ready(function(){	
			var thumbnailArray=new Array();
				$(".thumbnail").each(function(i){ 
					var videoId=$(this).val();
					$.ajax({				

						url:"https://openapi.youku.com/v2/videos/show_basic.json?client_id=82ae8ceabde0862c&video_id="+videoId,
								type : "GET",
								async : false,
								dataType : "json",
								success : function(msg) {
									thumbnailArray.push(msg.thumbnail);
								},
								error : function(errMsg) {
									alert("获取失败");
								}
							});
					
				});
				$(".thumbnailphoto").each(function(i){ 
					$(this).attr("src",thumbnailArray.shift());
				});
			});
		function openit(vedioId){
			$("#nowvId").val(vedioId);
		}
		function pauseVideo(){
			$("#vedioPage").attr("src","");
		}
		</script>
		</body>
	<script src="<%=path%>/page/front/come/blog_files/demoad.js"></script>	
	
	</html>